<template>
    <div class="contain-edit">
        <div class="header">
           <p>前端登录背景>>设置</p>
        </div>
       <div class="main">
           <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
                <el-form-item label="上传图片：" prop="imageFileKey">
                    <el-upload class="avatar-uploader"
                    :http-request="myUpload"
                    :action="upLoadUrl"
                    :header="upLoadHeaders"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar"> 
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i> 
                    </el-upload>
                </el-form-item>          
                <el-form-item>
                    <el-button type="primary" @click="submitForm('information')"  :loading="loading">保存</el-button>
                </el-form-item>
           </el-form>
       </div>

    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
import $ from 'jquery'
  export default {
    data() {
        return {
            upLoadUrl:"",
            upLoadHeaders:{},
            imageUrl:null,
            information:{
                typeCode:901,
                imageFileKey:null
            },
            rules: {
                imageFileKey: [
                    { required: true, message: '请上传图片', trigger: 'blur' }
                ]
            },
            loading: false
        };
    },

    mounted() {
        this.getDetail(); 
    },
    methods: {
        getDetail(){
           let url = CONSTANT.URL.BACKGROUND.FINDALL;
           let data = {
               id:this.id
           } ;
           common.requestAjax(url,JSON.stringify(data),null,(res)=>{
              let arr =  res.data.bussData;
               arr.map((item)=>{
                   if(item.typeCode == 901){
                       this.imageUrl = item.imageUrl;
                       this.information.imageFileKey = item.imageFileKey
                   }
               })
               this.imageUrl =  obj.imageUrl     
           }) 
        },
        submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    var url = CONSTANT.URL.BACKGROUND.SAVE;
                    let param = JSON.stringify(this.information);
                    common.requestAjax(url, param, null, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            this.loading = false;
                        } else {
                            console.log(res)
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                            this.loading = false;
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        beforeAvatarUpload(file) {
            let url = CONSTANT.URL.SYSTEM.ADMINUPLOADFILE;
            let param = {
                suffix:file.name.split(".")[1],   // 文件后缀  png
                contentType:file.type             // 文件类型  image/png
            }
            common.requestAjax(url,param,null,(res)=> {
                this.upLoadUrl = res.data.bussData.uploadUrl;
                this.information.imageFileKey = res.data.bussData.fileKey;
                let downloadUrl =   res.data.bussData.downloadUrl;
                common.uploadFile(this.upLoadUrl,file,file.type,(res)=>{
                    this.imageUrl = downloadUrl;
                })
            });    
        },

        myUpload(content) {
            //$axios({method: 'put',url: this.upLoadUrl,header: {'Content-Type': content.file.type},data: content.file}).then(res => content.onSuccess(res)).catch(error => content.onError(error));
            },
    }
  }
</script>

<style lang="scss" scoped >
@import '/static/bootstrap.css';     
@import '/sys/static/bootstrap.css'; 
    .el-form-item__content{
        margin-left: 0;
    }
    .avatar-uploader {
            border-radius: 6px;
            box-sizing: border-box;
            vertical-align: top;
            .el-upload {
                cursor: pointer;
                position: relative;
                overflow: hidden;
                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                    border: 1px dashed #d9d9d9 !important;
                    border-radius: 6px;
                    margin-left: 6px;
                }
                .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }
            .el-upload:hover {
                border-color: #20a0ff;
            }        
        }   
</style>